<template>
  <div class="manage">
    <p class="manageName">广告管理({{count}})</p>
    <div class="inputBox">
      <el-button type="primary" icon="el-icon-plus">添加</el-button>
      <el-button type="primary" icon="el-icon-refresh">刷新</el-button>
      <div class="rightBox">
        <el-input v-model="input" placeholder="请输入搜索关键字"></el-input>
          <i class="iconfont icon-search"></i>
      </div>
    </div>
    <div class="tab">
      <el-table :data="manageData" style="width: 100%">
        <el-table-column label="广告标题">
          <template slot-scope="scope">
            <span>{{ scope.row.ad_name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="素材图片" width="180">
          <template slot-scope="scope">
          <img :src=" 'http://www.lertui.com/ad/upload/ad/'+scope.row.ad_pic " alt="" style="width: 120px;height: 60px">
          </template>
        </el-table-column>

        <el-table-column label="链接地址" width="200">
          <template slot-scope="scope" >
          <span style="color:#fe5411;width:200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">{{scope.row.ad_link}}</span>
          </template>
        </el-table-column>

        <el-table-column label="发布时间" >
          <template slot-scope="scope">
           <span>{{scope.row.ad_createTime | formatDate}}</span>
          </template>
        </el-table-column>

        <el-table-column label="审核状态" >
          <template slot-scope="scope">
            <span v-if="scope.row.ad_status==0">审核中</span>
            <span v-if="scope.row.ad_status==1" style="color:#5bc517">审核通过</span>
            <span v-if="scope.row.ad_status==2" style="color:#f52f3e">审核失败</span>
          </template>
        </el-table-column>

        <el-table-column label="投放状态" >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.ad_isfreezen == 1 ? true:false" active-color="#fe5411" inactive-color="#999" @change="putInStatus(scope.$index, scope.row)">
          </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作"  width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="compileBox"  v-if="isCompileShow">
      <compile :compileData="compileData" ></compile>
    </div>
  </div>
</template>
<script>
import { formatDate } from "../../common/js/common.js";
import Compile from "./compile";
export default {
  name: "manage",
  data() {
    return {
      input: "",
      dddd: false,
      value2: true,
      isCompile: false,
      count: 0,
      manageData: [],
      compileData: []
    };
  },
  computed: {
    isCompileShow() {
      return this.$store.state.isCompile;
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },
  mounted() {
    this.manageDataInfo();
  },
  methods: {
    handleEdit(index, row) {
      this.$store.state.isCompile = true;
      this.compileData = row;
      this.$router.push({ path: "/manage", query: { id: row.ad_id } });
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    manageDataInfo() {
      console.log();
      this.$http({
        method: "POST",
        url: "/ad/action/t_ad_do.jsp",
        data: `action=query&a_id=11`
      }).then(res => {
        this.count = res.data.count;
        this.manageData = res.data.data;
      });
    },
    putInStatus(index, row) {
      console.log(index, row);
      let ad_isfreezen = row.ad_isfreezen == true ? 0 : 1;
      this.$http({
        method: "POST",
        url: "/ad/action/t_ad_do.jsp",
        data: `action=updateIsfreezen&ad_isfreezen=${ad_isfreezen}&ad_id=${
          row.ad_id
        }`
      })
        .then(res => {
          this.manageDataInfo();
          if (res.data.success == 1) {
            this.$message({
              message: "修改成功！",
              type: "success"
            });
          } else {
            this.$message({
              message: "修改失败！",
              type: "warning"
            });
          }
        })
        .catch(error => {
          this.$message({
            message: " 网络错误，请稍后再试！",
            type: "warning"
          });
        });
    }
  },
  components: {
    Compile
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';

.manage {
  width: 100%;
  height: 800px;
  padding: 25px;
  box-sizing: border-box;
  position: relative;

  .compileBox {
    position: absolute;
    top: 55px;
    left: 25px;
    right: 25px;
    height: 800px;
    background: #fff;
    z-index: 999;
    border-radius: 3px;
  }

  .manageName {
    color: #333;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .inputBox {
    position: relative;
    margin-bottom: 20px;

    .rightBox {
      width: 260px;
      position: absolute;
      right: 0;
      top: -1px;
      background: #ddd;
      height: 38px;

      .icon-search {
        position: absolute;
        right: 10px;
        top: 12px;
        font-weight: 600;
        color: #999;
      }
    }
  }
}
</style>
